<template>
	<view>
		<view class="a">
			<view class="b" @tap='qh0'>新品</view>
			<view class="b">销量</view>
			<view class="b" @tap='qh'>价格</view>
			<view class="b">筛选</view>
		</view>
		<view class="sp" v-for="item in list" @tap="xq(item.id)">
			<image class="tp" :src="item.cover_img"></image>
			<view>{{item.gname}}</view>
			<view>{{item.price_now}}</view>
			<view>{{item.origin_city}}</view>
		</view>
		
	</view>
</template>

<script>
	import {list1} from '../../../util/kind/kind.js'
	import {detail} from '../../../util/home/index.js'
	export default {
		data() {
			return {
				list:[]
			}
		},
		onLoad(val) {
			list1({
				kindId:val.id,
			})
			.then(res=>{
				console.log(res)
				this.list = res.data.data.list
			})
		},
		onReachBottom() {
		},
		methods: {
			xq(val){
				console.log(val)
				uni.navigateTo({
					url:`../../home/homeinfo/homeinfo?id=${val}`
				})
			},
			qh(){
				this.list=this.list.sort(this.compare('price_now'))
			},
			// qh0(){
			// 	var result = await productList({
			// 		kindId=this.kindId
			// 	})
			// 	this.list = result.data.data.list;
			// },
			compare(prop){
				return function(a,b){
					var val1=a[prop];
					var val2=b[prop];
					return val2 - val1;
				}
			}
		},
		
	}
</script>

<style>
	.sp{
		width: 318rpx;
		height: 414rpx;
		float: left;
		margin-left: 40rpx;
		background-color: white;
	}
	.tp{
		width: 318rpx;
		height: 238rpx;
	}
	.a{
		width: 750rpx;
		height: 76rpx;
		background-color: #354E44;
	}
	.b{
		width: 25%;
		float: left;
		color: white;
		text-align: center;
		line-height: 38px;
	}

</style>
